/* 主题相关的CSS变量 */
:root {
  --theme-gradient: linear-gradient(-45deg, #0a2463, #3e92cc, #2ca58d, #84b082);
  --primary-color: #1890ff;
  --secondary-color: #52c41a;
  --background-start: #0a2463;
  --background-end: #3e92cc;
}

/* 紫色主题 */
[data-theme="purple"] {
  --theme-gradient: linear-gradient(-45deg, #4a148c, #7b1fa2, #9c27b0, #ba68c8);
  --primary-color: #7b1fa2;
  --secondary-color: #9c27b0;
  --background-start: #4a148c;
  --background-end: #7b1fa2;
}

/* 绿色主题 */
[data-theme="green"] {
  --theme-gradient: linear-gradient(-45deg, #1b5e20, #388e3c, #4caf50, #81c784);
  --primary-color: #388e3c;
  --secondary-color: #4caf50;
  --background-start: #1b5e20;
  --background-end: #388e3c;
}

/* 橙色主题 */
[data-theme="orange"] {
  --theme-gradient: linear-gradient(-45deg, #e65100, #f57c00, #ff9800, #ffb74d);
  --primary-color: #f57c00;
  --secondary-color: #ff9800;
  --background-start: #e65100;
  --background-end: #f57c00;
}

/* 通用动画 */
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 主题应用的通用样式 */
body {
  background: var(--theme-gradient);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

.header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

.action-btn {
  background: var(--primary-color);
}

.action-btn:hover {
  background: var(--secondary-color);
}

/* 其他需要主题色的元素 */
.nav-item-icon {
  background: var(--primary-color);
}

h1 {
  color: var(--primary-color);
}
